<!--
 * @Description: 测试表格
 * @Author: Mr.chen
 * @LastEditors: Mr.chen
 * @LastEditTime: 2022-09-21 17:57:15
-->
<template>
  <div class="cantainer">
    <!-- 顶部 start -->
    <header class="top">
      <div class="up">
        <div class="topleft">
          <!-- 医院logo -->
          <img src="./fonts//女性-人物.png" />
          <span>海旺医院</span>
        </div>
        <div class="topright">
          <span>2022年09月15日</span>
          <br />
          <span>星期四17:17:20</span>
        </div>
      </div>
    </header>
    <!-- 顶部 end -->
    <!-- 医生信息 start-->
    <main class="docmsg">
      <div class="head">
        <div class="dochead" style="margin: 0 auto">
          <img src="./fonts/医生.png" class="image" />
        </div>
      </div>
      <div class="font">
        <span class="docmessage">医生信息</span>
        <div>郝大夫 | 副主任医师</div>
        <p class="word"
          >北京中研集团东城中医医院妇科主任医师[3],原北京宣武医院中医科主任医师,
          从医近40年,在诊治妇科,内科,神经科及皮肤科常见病和疑难杂症方面,具有丰富的中医临床经验和独特疗.</p
        >
      </div>
    </main>
    <div class="room">
      <div class="roomleft">
        <img src="./fonts/部门科室维护.png" alt="" />
      </div>
      <div class="roomright">
        <h4>彩超室</h4>
        <span style="font-size: 14px">医技科-功能诊断</span>
      </div>
    </div>
    <!-- 医生信息 end -->
    <div class="info"> </div>
    <article class="hospatient">
      <div class="hos">
        <div class="leftpat">就诊患者</div>
        <div class="leftname">李</div>
        <h2>109876-李*娟</h2>
      </div>
      <div class="stayhos">
        <div class="rightpat">待就诊患者</div>
        <div class="rightname">曹</div>
        <h3 style="margin: 25px">109870-曹*</h3>
      </div>
    </article>
    <div class="info"> </div>
    <!-- 当前等待患者部分 start -->
    <section>
      <div class="current">
        <div class="stay">当前等待患者</div>
        <div class="list">
          <ul>
            <li class="second">
              <span style="width: 25%">
                <div class="horn">
                  <img src="./fonts/喇叭 (1).png" class="image" />
                </div>
                <span class="callround">
                  <p style="color: rgb(227, 176, 176)">已呼叫2次</p>
                  <p>
                    <span class="lineup">排队号:</span>
                    <span style="font-size: 14px">0011001897</span>
                  </p>
                </span>
              </span>
              <span
                class="ssss"
                style="
                  clear: both;
                  float: right;
                  width: 55%;
                  margin-top: -40px;
                  margin-left: 10%;
                "
              >
                <div>
                  <p style="float: left">郝*来</p
                  ><img
                    src="./fonts/24gf-portraitMale.png"
                    style="width: 24px"
                  />
                </div>

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >
              </span>
            </li>
            <li class="second">
              <span style="width: 25%">
                <div class="horn">
                  <img
                    src="./fonts/喇叭 (1).png"
                    style="
                      display: block;
                      height: 30px;
                      margin: 0 auto;
                      position: absolute;
                      top: 50%;
                      margin-top: -15px;
                      left: 50%;
                      margin-left: -15px;
                    "
                  />
                </div>
                <span style="float: left; margin-left: 20px">
                  <p style="color: rgb(227, 176, 176)">已呼叫2次</p>
                  <p>
                    <span style="color: rgb(189, 190, 191); font-size: 12px"
                      >排队号:</span
                    >
                    <span style="font-size: 14px">0011001897</span>
                  </p>
                </span>
              </span>
              <span
                class="ssss"
                style="
                  clear: both;
                  float: right;
                  width: 55%;
                  margin-top: -40px;
                  margin-left: 10%;
                "
              >
                <div>
                  <p style="float: left">郝*来</p
                  ><img
                    src="./fonts/24gf-portraitMale.png"
                    style="width: 24px"
                  />
                </div>

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >
              </span>
            </li>
            <li
              class="second"
              style="clear: both; padding: 10px 5%; height: 60px"
            >
              <span style="width: 25%">
                <div class="horn" style="line-height: 56px; position: relative">
                  <img
                    src="./fonts/喇叭 (1).png"
                    style="
                      display: block;
                      height: 30px;
                      margin: 0 auto;
                      position: absolute;
                      top: 50%;
                      margin-top: -15px;
                      left: 50%;
                      margin-left: -15px;
                    "
                  />
                </div>
                <span style="float: left; margin-left: 20px">
                  <p style="color: rgb(227, 176, 176)">已呼叫2次</p>
                  <p>
                    <span style="color: rgb(189, 190, 191); font-size: 12px"
                      >排队号:</span
                    >
                    <span style="font-size: 14px">0011001897</span>
                  </p>
                </span>
              </span>
              <span
                class="ssss"
                style="
                  clear: both;
                  float: right;
                  width: 55%;
                  margin-top: -40px;
                  margin-left: 10%;
                "
              >
                <div>
                  <p style="float: left">郝*来</p
                  ><img
                    src="./fonts/24gf-portraitMale.png"
                    style="width: 24px"
                  />
                </div>

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >
              </span>
            </li>
            <li
              class="second"
              style="clear: both; padding: 10px 5%; height: 60px"
            >
              <span style="width: 25%">
                <div class="horn" style="line-height: 56px; position: relative">
                  <img
                    src="./fonts/喇叭 (1).png"
                    style="
                      display: block;
                      height: 30px;
                      margin: 0 auto;
                      position: absolute;
                      top: 50%;
                      margin-top: -15px;
                      left: 50%;
                      margin-left: -15px;
                    "
                  />
                </div>
                <span style="float: left; margin-left: 20px">
                  <p style="color: rgb(227, 176, 176)">已呼叫2次</p>
                  <p>
                    <span style="color: rgb(189, 190, 191); font-size: 12px"
                      >排队号:</span
                    >
                    <span style="font-size: 14px">0011001897</span>
                  </p>
                </span>
              </span>
              <span
                class="ssss"
                style="
                  clear: both;
                  float: right;
                  width: 55%;
                  margin-top: -40px;
                  margin-left: 10%;
                "
              >
                <div>
                  <p style="float: left">郝*来</p
                  ><img
                    src="./fonts/24gf-portraitMale.png"
                    style="width: 24px"
                  />
                </div>

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >
              </span>
            </li>
            <li
              class="second"
              style="clear: both; padding: 10px 5%; height: 60px"
            >
              <span style="width: 25%">
                <div class="horn" style="line-height: 56px; position: relative">
                  <img
                    src="./fonts/喇叭 (1).png"
                    style="
                      display: block;
                      height: 30px;
                      margin: 0 auto;
                      position: absolute;
                      top: 50%;
                      margin-top: -15px;
                      left: 50%;
                      margin-left: -15px;
                    "
                  />
                </div>
                <span style="float: left; margin-left: 20px">
                  <p style="color: rgb(227, 176, 176)">已呼叫2次</p>
                  <p>
                    <span style="color: rgb(189, 190, 191); font-size: 12px"
                      >排队号:</span
                    >
                    <span style="font-size: 14px">0011001897</span>
                  </p>
                </span>
              </span>
              <span
                class="ssss"
                style="
                  clear: both;
                  float: right;
                  width: 55%;
                  margin-top: -40px;
                  margin-left: 10%;
                "
              >
                <div>
                  <p style="float: left">郝*来</p
                  ><img
                    src="./fonts/24gf-portraitMale.png"
                    style="width: 24px"
                  />
                </div>

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >

                <div
                  style="color: rgb(141, 216, 194); border-left: 1px solid #999"
                  >老年</div
                >
              </span>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 当前等待患者部分 end -->
    <div class="foot">
      <ul>
        <li>
          <span class="remind">温馨提示:</span>
          <span class="prompt">海旺医院欢迎您！</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import './css/base.css'
import './css/index.css'
import './css/liMarquee.css'
</script>
<style>
.cantainer {
  background-color: rgb(75, 132, 254);
  background-size: 100% 100%;
  height: 100vh;
  width: 100%;
}
</style>
